<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String contextPath = request.getContextPath();
%>
<html>
<head>
	<title></title>
	<jsp:include page="../main/head.jsp"></jsp:include>
	<script type="text/javascript">
		/* jquery入口*/
		$(function() {
			loadgrid(); //加载datagrid
		});
		/* 加载datagrid列表*/
		function loadgrid(){
		$('#grid').datagrid({
				title : '书库类型',
				url :  mis.path+'/book!grid.action',//'datagridData.json',
				loadMsg : '正在加载…',  //当从远程站点载入数据时，显示的一条快捷信息。
				fit : true,  //窗口自适应
				nowrap: false, //设置为true，当数据长度超出列宽时将会自动截取
				fitColumns : true, // 自动适应列宽								
				singleSelect : true, // 每次只选中一行
				sortName : 'id', //默认排序字段
				sortOrder : 'asc', // 升序asc/降序desc
				striped : true,  // 隔行变色  
				pagination : true,  // 在底部显示分页工具栏
				pageNumber : 1, //初始化页码 
				pageSize : 20,  // 指定每页的大小，服务器要加上page属性和total属性
				pageList : [ 20, 30, 50 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
				//rownumbers : true, // 在最前面显示行号 
				idField : 'id', // 主键属性
				// 冻结列,当很多咧出现滚动条时该列不会动
				frozenColumns : [ [
					{title : '书号', width : '150',	field : 'bno',sortable : true},
					{title : 'ISBN编号', width : '150',	field : 'isbn',sortable : true},
// 					{title : '所属类别', width : '100', field : 'btname', sortable : true}, 
				] ],
				columns : [ [ 
					{title : '书本名称', width : '100', field : 'bookname', sortable : false}, 
					{title : '作者', width : '100', field : 'author', sortable : false}, 
					{title : '出版社', width : '100', field : 'publisher', sortable : false}, 
					{title : '原价', width : '100', field : 'price', sortable : false}, 
					{title : '折扣', width : '100', field : 'discount', sortable : false}, 
					{title : '书本封面', width : '100', field : 'picture', sortable : false,
						formatter:function(value,rows,index){
							return '<img width="50px" src="'+value+'"/>';
						}
					}, 
				] ],
				
				// 工具栏按钮

				toolbar: [
					"-", {id: 'add', text: '添加',	iconCls: 'icon-add', handler: function () { add()} }, //添加按钮
					"-", {id: 'edit', text: '修改',	iconCls: 'icon-edit',	 handler: function () { edit()} }, //修改按钮
					"-", {id: 'remove', text: '删除',	iconCls: 'icon-remove', handler: function () {remove()} }, //删除按钮
					"-", {id: 'remove',  text: '刷新',	iconCls: 'icon-reload', handler: function () {reload()} } //刷新按钮
					]
			});
		}
		/* 添加数据*/
		function add() {
			openDialog('添加客户'); // 显示添加数据dialog窗口
			$("#form").form('clear'); // 清空form的数据
			url = mis.path+'/book!add.action'; //后台添加数据action
		}

		/* 修改数据*/
		function edit() {
			var row = $('#grid').datagrid('getSelected'); //// 得到选中的一行数据
			//如果没有选中记录
			if(row == null){
				$.messager.alert("提示", "请选择一条记录",'info');
				return;
			}
			openDialog('修改类型属性'); // 显示更新数据dialog窗口
			$("#form").form('load', row); // 加载选择行数据
			url = mis.path+'/book!edit.action?id='+row.id; //后台更新数据action
		}

		/* 删除数据*/
		function remove(){
			var row = $('#grid').datagrid('getSelected');
			//如果没有选中记录
			if(row == null){
				$.messager.alert("提示", "请选择一条记录",'info');
				return;
			}
			$.messager.confirm('确认', '确定要删除吗？', function (r) {
					if (r) {
						//提交到后台的action
						$.post(mis.path+'/book!remove.action', { id: row.id }, function (result) { 
							if (result.success) {
								reload();
								$.messager.show({	//显示正确信息
									title: '提示',
									msg: result.msg
								});									
							} else {
								$.messager.show({	//显示错误信息
									title: '错误',
									msg: result.msg
								});
							}
						}, 'json');
					}
				});
			
		}
		
		/* 保存数据*/
		function save(){
			$('#form').form('submit',{
				url: url,  //提交地址
				onSubmit: function(){
					return $(this).form('validate'); //前台字段格式校验
				},
				success: function(result){
					var result = eval('('+result+')');
					if (result.success){
						closeDialog();// 调用closeDialog;	
						reload();// 重新加载
						$.messager.show({	//显示错误信息
							title: '提示',
							msg: result.msg
						});
						
					} else {		
						$.messager.show({    //显示正确信息
							title: '错误',
							msg: result.msg
						});
					}
				}
			});
		}
		
		/* 显示Dialog*/
		function openDialog(title){
			$("#dialog").dialog({
				resizable: false,
				modal: true,
				buttons: [{ //设置下方按钮数组
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function () {
                       save();
                    }
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                    	closeDialog();
                    }
                }]
			});
			$("#dialog").dialog('setTitle', title);
			setImg();
			$("#dialog").dialog('open');
		}
		/* 关闭Dialog*/
		function closeDialog() {	
		    $("#form").form('clear'); // 清空form的数据
			$("#dialog").dialog('close');// 关闭dialog
		}
		/* 刷新grid*/
		function reload(){
			$('#grid').datagrid('reload');
		}
		/* 查询*/
		function doSearch() {
			$('#grid').datagrid('load',{
				bookName: $('#bookName').val()
			}); 
		}
		/* 重置*/
		function setNull(){
			$("#searchForm").form("clear"); //清空查询字段值
		}
		/* 重置*/
		function setImg(){
			$("#picture-img").val("1234");
		}
		var bookTypeList;
		$(function(){
			$.ajax({ 
				   type: "POST", 
				   url: mis.path+"/book!getBookTypeList.action", 
				   data: "书本类型", 
				   success: function(data){ 
					   initBookType(data);
				   } 
			});
		});
		
		function initBookType(jsonStr){
			  console.log(jsonStr);
			  bookTypeList = $.parseJSON(jsonStr);
			  $.each(bookTypeList,function(n,value){
				  console.log(value);
				  $("#bookType").append('<option value="'+value[0]+'">'+value[1]+'</option>');
			});  
			  
		}
		
		function showTypeList(){
			$.each(bookTypeList,function(n,value){
				  $("#bookType").append('<option value="'+value[0]+'">'+value[1]+'</option>');
			});  
		}
		
	</script>
</head>
<body>		
	<div data-options="fit:true, border:false" style="width:100%;height:100%;padding:0px;overflow:hidden">
		<table id="grid"></table>
	</div>	
	<div id="dialog" class="easyui-dialog" data-options="closed:true" title="客户管理" style="width:400px;height:420px;padding:20px;" >
		<form id="form" method="post">
			<input type="hidden" name="quantity">
			<div class="form-group">
			   <label>书号</label> 
			   <input class="form-control"  name="bno" class="easyui-validatebox" data-options="required:true" /> 
		   </div> 
			<div class="form-group">
			   <label>ISBN编号</label> 
			   <input class="form-control"  name="isbn" class="easyui-validatebox" data-options="required:true" /> 
		        
		   </div> 
		   <div class="form-group"> 
			   <label>书名</label> 
			   <input class="form-control" name="bookname" class="easyui-validatebox" data-options="required:true" /> 
		   </div> 
		   <div class="form-group"> 
			   <label>所属类型</label> 
			   <select id="bookType" name="btid" class="form-control"></select>
<!-- 			   <input class="form-control" name="btid" class="easyui-validatebox" data-options="required:true" />  -->
		   </div> 
		   <div class="form-group"> 
			   <label>作者</label> 
			   <input class="form-control" name="author" class="easyui-validatebox" data-options="required:true" /> 
		   </div> 
		   <div class="form-group"> 
			   <label>出版社</label> 
			   <input class="form-control" name="publisher" class="easyui-validatebox" data-options="required:true" /> 
		   </div> 
		   <div class="form-group"> 
			   <label>描述</label> 
			   <textarea class="form-control" name="description" rows="10" class="easyui-validatebox" data-options="required:true" ></textarea> 
		   </div> 
		   <div class="form-group"> 
			   <label>价格</label> 
			   <input type="number" class="form-control" name="price" class="easyui-validatebox" data-options="required:false" /> 
		   </div> 
		   <div class="form-group"> 
			   <label>零售折扣</label> 
			   <input type="number" class="form-control" name="discount" class="easyui-validatebox" data-options="required:false" /> 
		   </div> 
		   <div class="form-group"> 
			   <label>封面图片</label> 
			   <img id="picture-img"/>
			   <input id="picture" class="form-control" name="picture" class="easyui-validatebox" data-options="required:false" /> 
		   </div> 
		   
		</form>
	</div>
</body>
</html>